<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>砍价活动</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="logoArea" class="navbar">
    <div class="navbar">
        <img src="../static/gg.png" height="370" width="100%" alt="">
    </div>
</div>
<table class="table table-bordered">
    <caption id="cc" style="color: red">最新活动</caption>
    <thead>
    <tr style="text-align: center;" th:height="10" th:width="100">
        <th style="text-align: center">ID</th>
        <th style="text-align: center">砍价商品</th>
        <th style="text-align: center">商品原价（元）</th>
        <th style="text-align: center">商品图片</th>
        <th style="text-align: center">砍价分享标题</th>
        <th style="text-align: center">活动分享描述</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>

        <tr th:each="list :${list.list}" style="text-align:center;">
            <td th:text="${list.bargainId}"></td>
            <td th:text="${list.shopName}"></td>
            <td th:text="${list.shopPrice}+'元'"></td>
            <td>
                <img th:src="${list.bargainImg}" width="70" height="70">
            </td>
            <input id="seckillEndTime" type="hidden" th:value="${#dates.format(list.bargainStart,'yyyy-MM-dd HH:mm:ss')}">
            <input id="eTime" type="hidden" th:value="${#dates.format(list.bargainEnd,'yyyy-MM-dd HH:mm:ss')}">
<!--            <td th:text="${#dates.format(list.bargainStart,'yyyy-MM-dd HH:mm:ss')}"></td>-->
<!--            <td th:text="${#dates.format(list.bargainEnd,'yyyy-MM-dd HH:mm:ss')}"></td>-->
            <td th:text="${list.bargainTitle}"></td>
            <td th:text="${list.bargainDescribe}"></td>
            <td>
                <br>
                <button  class="btn btn-danger" id="b1" th:onclick="rush([[${list.bargainId}]],[[${list.bargainStart}]],[[${list.bargainEnd}]])">砍一刀!</button>
            </td>
        </tr>
</table>

<div class="as">
    <div class="as one">
        当前第 <span th:text="${list.pageNum}"></span> 页，
        共 <span th:text="${list.pages}"></span> 页，
        <span th:text="${list.total}"></span>条记录
    </div>
    <ul class="as current" style="list-style: none">
        <!--th:if="${studentPageInfo.hasPreviousPage}"}-->
        <li th:if="${list.hasPreviousPage}"}><!--hasPreviousPage默认值为false， 如果有上一页，则不显示首页-->
            <a th:href="@{/list?pageNum=}+${1}">首页</a>
        </li>
        <li th:if="${list.hasPreviousPage}"><!--hasPreviousPage默认值为false， 如果有上一页，则不显示-->
            <a th:href="@{/list?pageNum=}+${list.prePage}">上一页</a>
        </li>
        <li th:each="nav:${list.navigatepageNums}"><!--navigatepageNums是一个数组：遍历所有导航页号。 -->
            <a th:href="@{/list?pageNum=}+${nav}" th:text="${nav}" th:if="${nav != list.pageNum}"></a><!--如果不是当前页则可以跳转其他页面。遍历展示-->
            <a th:class="${'active'}" th:if="${nav == list.pageNum}" th:text="${nav}"></a><!--如果是当前页则有样式。遍历 展示-->
        </li>
        <li th:if="${list.hasNextPage}"><!--hasNextPage默认值为false， 如果没有下一页，则不显示-->
            <a th:href="@{/list?pageNum=}+${list.nextPage}">下一页</a>
        </li>
        <li th:if="${list.pageNum < list.pages}"><!--如果当前页小于总页数则不显示尾页 -->
            <a th:href="@{/list?pageNum=}+${list.pages}">尾页</a>
        </li>
    </ul>
</div>

<div  class="navbar">
    <img src="../static/yys.png" height="450" width="100%" alt="">
</div>
</div>
</body>
<script>

    showTime()

    setInterval(showTime, 1000)

    function showTime() {
        var date = new Date();  //获取当前时间
        var now = date.getTime();  //获取当前GMT时间
        //dateObject.getTime()，dateObject指定的日期和时间距 1970年 1月 1日午夜（GMT 时间）之间的毫秒数。
        var endDate = new Date($("#bargainEnd").val());  //获取结束时间
        var end = endDate.getTime();  //获取结束GMT时间
        var diffTime = end - now;  //计算时间差
        var d, h, m, s;
        if (diffTime >= 0) {
            s = Math.floor(diffTime / 1000 % 60);
            m = Math.floor(diffTime / 1000 / 60 % 60);
            h = Math.floor(diffTime / 1000 / 60 / 60 % 24);
            d = Math.floor(diffTime / 1000 / 60 / 60 / 24);

            // 封装成函数
            d = addZero(d);
            h = addZero(h);
            m = addZero(m);
            s = addZero(s);

            var time = d + '天' + h + '时' + m + '分' + s + '秒';
            $("#cc").text('距离活动开始还有:' + time)
            $(".btn").attr("disabled", true)
        } else {
            var date = new Date();  //获取当前时间
            var now = date.getTime();  //获取当前GMT时间
            //dateObject.getTime()，dateObject指定的日期和时间距 1970年 1月 1日午夜（GMT 时间）之间的毫秒数。
            var endDate = new Date($("#eTime").val());  //获取结束时间
            var end = endDate.getTime();  //获取结束GMT时间
            var diffTime = end - now;  //计算时间差
            var d, h, m, s;
            if (diffTime >= 0) {
                s = Math.floor(diffTime / 1000 % 60);
                m = Math.floor(diffTime / 1000 / 60 % 60);
                h = Math.floor(diffTime / 1000 / 60 / 60 % 24);
                d = Math.floor(diffTime / 1000 / 60 / 60 / 24);

                // 封装成函数
                d = addZero(d);
                h = addZero(h);
                m = addZero(m);
                s = addZero(s);

                var time = d + '天' + h + '时' + m + '分' + s + '秒';
                $("#cc").text('距离活动结束还有:' + time)
                $(".btn").attr("disabled", false)
            } else {
                $("#cc").text('活动已经结束')
                $(".btn").attr("disabled", true)
            }
        }
    }

    // 为数字添加0前缀
    function addZero(num) {
        if (num < 10) {
            num = '0' + num;
        }
        return num;
    }
    function rush(bargainId,bargainStart,bargainEnd) {
        var dat3= new Date().getTime();
        var dat = new Date(bargainStart).getTime();
        var dat2 = new Date(bargainEnd).getTime();
        console.log(dat);
        console.log(dat2);
        console.log(dat3);
        if (dat3>=dat && dat3<=dat2){
            alert("砍价成功");
            location="http://localhost:9862/qrcode/getQRCode?content=www.baidu.com"
        }else if (dat3<dat){
            alert("砍价活动还没开始");
        }else {
            alert("砍价已经结束");
        }
    }


</script>
</html>
<style>
    .table-hover{
        text-align: center;
    }
    .as .current{
        width: 600px;
        text-align: center;
    }
    ul::after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    ul{
        margin-left: -35px;
    }
    .one{
        margin-left: 15px;
    }
    ul a{
        text-decoration: none;
        display: inline-block;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;

    }
    ul li{
        float: left;
        background: #ffc0cb;
        list-style: none;
        margin: 10px;
        border-radius: 10px;
    }
    .active{
        background-color: orange;
        border-radius: 10px;
    }
</style>
